import { useState  } from 'react';

import { GameWrapper } from './style';

import { colorsConfig } from './colorConfig';

import { useGameStore } from '../../../util/store';

function GameContainer() {
  const [activeColorIndex, setActiveColorIndex] = useState(0);
 
  const handleColorClick = (index: number, item:{ src:string,color:string}) => {
    useGameStore.setState({ bodyColor: item.color });
    setActiveColorIndex(index);
  };
  
  return (
    <>
      <GameWrapper className="game">
      <div className="container">

        {colorsConfig.map((item, index) => {
          return (
            <div
              className={activeColorIndex === index ? 'color-item' : ''}
              key={index}
              style={{
                backgroundImage: `url(${item.src})`,
                width: '32px',
                height: '32px',
                borderRadius: '50%',
                margin: '8px',
                backgroundSize: '100% 100%',
                cursor: 'pointer',
              }}
              onClick={() => handleColorClick(index,item)}
            ></div>
          );
        })}
      </div>
    </GameWrapper>
    </>
  );
}

export default GameContainer;
